<template>
  <div class="section1 wow bounceIn">
    <div class="logo-content">
      <div class="logo-box"></div>
      <div class="home-logo" ref="homeLogoWrap">
        页面不存在

        <div class="return" @click="$router.push('/')">
          <MyIcon name="arrowLeft" size="0.20rem" />
          <p>返回首页</p>
          <span>4S后自动跳转到首页</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'IndexHome404',
  data() {
    return {
      homeLogoWrap: null,
      time: null,
    }
  },
  methods: {
  },
}
</script>

<style lang="scss" scoped>
.section1 {
  width: 100%;
  height: 100vh;
  background-size: cover;
  position: relative;
  .logo-content {
    color: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;

    .logo-box {
      width: 130px;
      height: 188px;
      // background-image: url('@/assets/image/PC/index/panda.png');
      background-repeat: no-repeat;
      background-position: 0px 0px;
      background-size: 100% auto;
      animation: 4s go steps(73) 1 forwards;
      .logo-img {
        width: 130px;
        height: auto;
      }
    }

    .home-logo {
      color: #000;
      text-align: center;
      margin-top: 0.38rem;
      height: auto;
      width: 100%;
      opacity: 0;
      font-weight: 500;
      font-size: 0.3rem;
    }
  }
}

@keyframes go {
  0% {
    background-position-y: 0px;
  }
  100% {
    background-position-y: -13662px;
  }
}
.return {
  margin-top: 0.47rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  p {
    margin-left: 0.13rem;
    font-weight: 600;
    font-size: 0.16rem;
    color: #333333;
  }
  span {
    margin-left: 0.15rem;
    font-weight: 500;
    font-size: 0.14rem;
    color: #999999;
  }
}
</style>
